<template>
  <div class="userTree">
    <addHeader :title="'组织架构'" :btnName="'新增用户'" :hasBtn="false" @click="goAdd"></addHeader>
    <div class="treeBody">
      <commonOrgTree @getSelectNode="getSelectNode" ref="commonOrgTree"></commonOrgTree>
    </div>
    <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        width="500px">
      <userForm ref="userForm"></userForm>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import addHeader from "../../common/addHeader";
import commonOrgTree from "../../common/commonOrgTree";
import userForm from "./userForm";

export default {
  name: "userTree",
  components: {
    addHeader,
    commonOrgTree,
    userForm
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    getSelectNode(node) {
      this.$emit('getSelectNode', node)
    },
    goAdd() {
      this.dialogVisible = true
      this.$nextTick(()=>{
        this.$refs.userForm.form.orgName = this.$refs.commonOrgTree.selectNode.orgName
        this.$refs.userForm.form.orgId = this.$refs.commonOrgTree.selectNode.id
      })
      console.log(this.$refs.commonOrgTree.selectNode)
    },
    addUser() {
      this.$refs.userForm.validate().then(res=>{
        let params = {
          "email":this.$refs.userForm.form.email,
          "imgPath": this.$refs.userForm.form.imgPath,
          "mobile": this.$refs.userForm.form.mobile,
          "name": this.$refs.userForm.form.name,
          "orgId":this.$refs.userForm.form.orgId,
          "password": this.$refs.userForm.form.password,
          "roleId":this.$refs.userForm.form.roleId,
          "username": this.$refs.userForm.form.username,
        }
        this.$api.addUser(params).then(res=>{
          console.log(res)
          this.$emit('after-add')
          this.dialogVisible = false
        })
      })

    },
  }
}
</script>

<style scoped lang="less">
.el-tree {
  background-color: transparent;
}

.userTree {
  width: 200px;
  height: 100%;
  border-right: 1px solid #eee;
  .treeBody {
    width: 100%;
    height: calc(100% - 49px);
    background-color: #fafafa;
    overflow-y: auto;
  }
}
</style>